<script setup lang="ts">
import usePlayAudio from '@/hooks/usePlayAudio';
import { useControllerStore } from '@/store';
import useModal from '@/hooks/useModal';
import eventBus from '@/utils/eventBus';

interface IState {
  show: boolean;
  orderRemark: string;
  voiceRemark: string;
}

type EmitEvents = {
  (event: 'change', payload: { orderRemark: string; voiceRemark: string }): void;
};

const state = reactive<IState>({ show: false, orderRemark: '', voiceRemark: '' });
const emits = defineEmits<EmitEvents>();
const { showModal } = useModal();
const { isPlaying, playAudio, stopAudio } = usePlayAudio();
const randomNumber = Date.now() + Math.random().toString(36).substring(2);

onUnmounted(() => {
  unsubscribe();
});

// store监听
const unsubscribe = useControllerStore().$subscribe((_, storeState) => {
  const findRecordingTempFilePath = storeState.recordingTempFilePath.find((item) => item.key === randomNumber);
  if (findRecordingTempFilePath) {
    state.voiceRemark = findRecordingTempFilePath.value;
    emits('change', { orderRemark: state.orderRemark, voiceRemark: findRecordingTempFilePath.value });
  }
});

// 文本框失去焦点事件
const handleTextAreaBlur = (text: string) => {
  state.orderRemark = text;
  emits('change', { orderRemark: state.orderRemark, voiceRemark: state.voiceRemark });
};

// 处理录音长按事件
const handleRecordingLongPress = () => {
  uni.authorize({
    scope: 'scope.record',
    success: () => {
      eventBus.emit('callRecordingModal', { visible: true, text: '确认', key: randomNumber });
    },
    fail: () => {
      showModal(
        '需要获取您的录音权限，请前往设置中授权',
        {
          success: (res) => {
            if (res.confirm) {
              uni.openSetting();
            }
          },
        },
        '请求录音权限',
      );
    },
  });
};

// 重新录音
const handleReRecord = () => {
  state.voiceRemark = '';
  emits('change', { orderRemark: state.orderRemark, voiceRemark: state.voiceRemark });
};
</script>

<template>
  <view class="c-pd mt-12px c-pd bg-white c-br" @click="state.show = true">
    <view class="flex justify-between items-center">
      <view>
        <text>备注</text>
        <text class="ml-4px text-red" v-if="state.voiceRemark">有语音备注</text>
        <i v-if="state.voiceRemark" class="i-icon-park-solid:voice-one text-18px ml-2px text-red" />
      </view>
      <i class="i-mingcute:right-fill text-20px c-color-black" />
    </view>
    <view class="c-text-color-grey c-text-12 mt-8px" v-if="state.orderRemark">{{ state.orderRemark }}</view>
  </view>
  <van-popup :show="state.show" @close="state.show = false">
    <view class="c-br c-pd w-screen">
      <view class="c-br bg-white c-pd">
        <textarea :value="state.orderRemark" class="c-pd bg-#f5f5f5 w-full c-br mb-12px" placeholder="请填写备注" :maxlength="50" @blur="handleTextAreaBlur($event.detail.value)" />

        <view v-if="!state.voiceRemark" class="c-br c-bg flex justify-center items-center text-white py-8px c-text-12" @longpress="handleRecordingLongPress">长按录音</view>
        <view class="flex justify-between" v-else>
          <view v-if="!isPlaying" class="c-br c-bg flex justify-center items-center text-white py-4px flex-1 c-text-12 mr-2px" @click="playAudio(state.voiceRemark)">播放录音</view>
          <view v-else class="c-br c-bg-sec flex justify-center items-center text-white py-4px flex-1 c-text-12" @click="stopAudio">停止播放</view>
          <view v-if="!isPlaying" class="c-br c-bg-sec flex justify-center items-center text-white py-4px flex-1 c-text-12 ml-2px" @click="handleReRecord">重新录音</view>
        </view>
      </view>
    </view>
  </van-popup>
  <RecordingModal />
</template>
